<template>
  <div id="home-compoent">
    <!-- 顶标签 -->
    <Nav>
      <template #middle>
        <h3>购物街</h3>
      </template>
    </Nav>

    <!-- 分选栏 -->
    <Tabctrol
      :title="h_title"
      @send_type="get_type"
      ref="tabctroll"
      v-show="istabtraol"
      @click.native="current(0)"
      :class="{ tabctrol_show: istabtraol }"
    ></Tabctrol>

    <Scroll ref="scroll" :probetype="3" @sendScroll="getScroll">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <a :href="item.link">
            <!-- @load实时监听照片加载境况 -->
            <img :src="item.image" alt="" @load="image" />
          </a>
        </van-swipe-item>
      </van-swipe>

      <!-- 推荐 -->
      <Tuijian :datas="tuijian"></Tuijian>

      <!-- 流行 -->
      <Popular></Popular>

      <!-- 分选栏 -->
      <Tabctrol
        :title="h_title"
        @send_type="get_type"
        ref="tabctrol"
        @click.native="current(1)"
      ></Tabctrol>

      <!-- 商品栏 -->
      <Goods :goods="ctrol[my_type].list"></Goods>
    </Scroll>

    <!-- native修饰符  用于触发原生组件的事件 -->
    <Gotop @click.native="back" v-show="isTop"></Gotop>
  </div>
</template>

<script>
//nav标题
import Nav from "@/components/header/Nav.vue"
//推荐组件
import Tuijian from "@/views/home/home_detail/tuijian.vue"
//流行
import Popular from "@/views/home/home_detail/popular.vue"
//分选栏
import Tabctrol from "@/components/tab_ctrol/Tab_ctrol.vue"
//商品栏
import Goods from "@/views/home/home_detail/Goods.vue"
//回到顶部组件
import Gotop from "@/components/go_top/Go_top.vue"

//引用axios请求
import requist from "@/netword/index.js"
//引入封装的better-scroll函数
import Scroll from "@/components/scroll/Scroll.vue"
//混入
import mixin from "@/components/mixin/index.js"

export default {
  name: "Home",
  data() {
    return {
      //储存轮播图数据
      banner: [],
      //储存推荐组件数据
      tuijian: [],
      //分类选择的数据
      h_title: [
        { title: "流行", type: "pop" },
        { title: "新款", type: "new" },
        { title: "精选", type: "sell" },
      ],
      //存储分类选择的数据
      ctrol: {
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] },
      },
      //保存type状态
      my_type: "pop",
      //节流阀 控制请求数据的次数
      jie: true,
      //节流阀  控制图片加载的次数
      image_throttle: true,
      //判断分类框是否显示
      istabtraol: false,
      //保存分类框的高度
      tabctrol_height: 0,
    }
  },
  components: {
    Nav,
    Tuijian,
    Popular,
    Tabctrol,
    Goods,
    Scroll,
    Gotop,
  },
  mixins: [mixin],
  created() {
    this.getswiper()
  },
  mounted() {
    // console.log(this.$refs.tabctrol.$el.offsetTop)
  },
  //进入该组件时调用
  activated() {
    this.$refs.scroll.scroll.refresh()
  },
  //离开该组件时调用
  deactivated() {},
  destroyed() {
    console.log("我被销毁了")
  },
  methods: {
    //请求轮播图数据
    async getswiper() {
      const { data: res } = await requist({
        url: "/home/multidata",
      })
      //轮播图
      this.banner = res.data.banner.list

      //推荐模块
      this.tuijian = res.data.recommend.list
    },

    //接受类型
    async get_type(type) {
      const page = this.ctrol[type].page
      this.my_type = type

      const { data: res } = await requist({
        url: "/home/data",
        params: {
          page,
          type,
        },
      })
      this.ctrol[type].page++

      //判断是否还有数据
      if (res.length <= 0) {
        return console.log("已经没数据了")
      }

      this.ctrol[type].list = [...this.ctrol[type].list, ...res.data.list]

      //设置节流阀防止多次请求
      this.jie = true
    },

    //点击让页面回到顶端
    // back() {
    //   this.$refs.scroll.gotop()
    // },

    //接受scroll组件的滑动参数
    getScroll(position) {
      this.isTop = Math.abs(position.y) >= 1000

      //设置节流阀 防止多次请求
      if (
        Math.abs(position.y) >=
        Math.abs(this.$refs.scroll._data.scroll.maxScrollY)
      ) {
        if (this.jie) {
          this.jie = false
          this.get_type(this.my_type)
        }
      }

      //判断分类框是否显示
      this.istabtraol = Math.abs(position.y) > this.tabctrol_height
    },

    //实时监听照片的加载情况
    image() {
      if (this.image_throttle) {
        //获取分类框的距离顶的高度
        this.tabctrol_height = this.$refs.tabctrol.$el.offsetTop
        //获取到一次就把this.image_throttle 变为false
        this.image_throttle = false
      }
    },

    //选中当前的状态
    current(val) {
      if (val === 0) {
        this.$refs.tabctrol.current_index = this.$refs.tabctroll.current_index
      } else {
        this.$refs.tabctroll.current_index = this.$refs.tabctrol.current_index
      }
    },
  },
}
</script>

<style lang="less" scoped>
#home-compoent {
  position: relative;
  background-color: #eeeeee;
}

// 轮播图样式
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.van-swipe-item {
  img {
    width: 100%;
    height: 100%;
  }
}

.my-swipe .van-swipe-item[data-v-3dd2e005] {
  line-height: 0;
  vertical-align: middle;
}

#scroll-component {
  height: calc(100vh - 90px);
  overflow: hidden;
}

.tabctrol_show {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9;
}
</style>
